<template>
  <div class="detail">
    <van-nav-bar title="文章详情" left-arrow @click-left="$router.back()" />
    <div class="contain">
      <!-- 标题 -->
      <h2>{{ articleList.title }}</h2>

      <!-- 作者信息 -->
      <div class="author">
        <van-image
          width="40"
          height="40"
          :src="articleList.aut_photo"
          fit="cover"
          round
        />

        <div class="msg">
          <div class="name">{{ articleList.aut_name }}</div>
          <div class="time">{{ articleList.pubdate | timefromnow }}</div>
        </div>
        <van-button
          @click="unfolloew(articleList.aut_id)"
          v-if="articleList.is_followed"
          round
          type="info"
          ><van-icon name="success" />已关注</van-button
        >
        <van-button @click="follow(articleList.aut_id)" v-else round type="info"
          ><van-icon name="plus" />关注</van-button
        >
      </div>

      <!-- 文章内容 -->
      <div class="art" v-html="articleList.content"></div>
      <div class="end">-- end --</div>

      <div class="btn">
        <van-button
          v-if="articleList.attitude === 1"
          class="btnone"
          icon="good-job-o"
          plain
          round
          type="primary"
          >点赞</van-button
        >
        <van-button v-else class="btnone" icon="good-job-o" plain round
          >点赞</van-button
        >
        <van-button
          v-if="articleList.attitude === 0"
          icon="delete-o"
          plain
          round
          type="danger"
          >不喜欢</van-button
        >

        <van-button v-else icon="delete-o" plain round>不喜欢</van-button>
      </div>
    </div>
    <comment />
  </div>
</template>

<script>
import { getArticleAPI, followAuthorAPI, unfollowAuthorAPI } from "@/api";
import comment from "./components/comment.vue";
export default {
  components: {
    comment,
  },
  data() {
    return {
      articleList: {},
    };
  },

  methods: {
    async follow(val) {
      await followAuthorAPI({
        target: val,
      });
      this.$toast.success("关注成功");
      this.articleList.is_followed = true;
    },

    async unfolloew(val) {
      await unfollowAuthorAPI(val);
      this.$toast.success("取消关注成功");
      this.articleList.is_followed = false;
    },
  },

  async created() {
    const res = await getArticleAPI(this.$route.query.id);

    this.articleList = res.data.data;
  },
};
</script>

<style lang="less">
.detail {
  font-size: 16px;
  .van-nav-bar__title.van-ellipsis {
    color: #fff;
  }
  i.van-icon.van-icon-arrow-left.van-nav-bar__arrow {
    color: #fff;
  }
  .contain {
    margin: 10px 20px;
    .author {
      display: flex;
      font-size: 14px;
      align-items: center;
      margin-top: 10px;
      .msg {
        flex: 1;
        margin-left: 10px;
      }
    }
  }
  .art {
    margin-top: 30px;
    white-space: pre-wrap;
    word-break: break-word;
    img {
      width: 100%;
    }
    pre {
      white-space: pre-wrap;
      word-break: break-all;
    }
  }
  .end {
    text-align: center;
    color: #999;
    margin: 30px 0;
  }
  .btn {
    text-align: center;
    .btnone {
      margin-right: 30px;
    }
  }
}
</style>